<template>
  <div id="app" :style="appStyle" 
        @mousedown="handleStart"
        @touchstart="handleStart"
        @touchmove.prevent="handleMove">
    <transition :name="transitionName">
      <component :is="currentPage" :key="currentPageIndex" @page-change="handlePageChange"></component>
    </transition>
  </div>
</template>

<script>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import Vstomp from './components/Vstomp.vue';
import Demo3D from './components/Demo3D.vue';
import Demo3D_2 from './components/Demo3D_2.vue';
import BilibiliPlayer from './components/BilibiliPlayer.vue';
import WebPage from './components/WebPage.vue';
import effectChain from './components/EffectChain.vue';

export default {
  name: 'App',
  components: {
    Vstomp,
    Demo3D,
    Demo3D_2,
    BilibiliPlayer,
    WebPage,
    effectChain
  },
  setup() {
    const currentPageIndex = ref(0);
    const assetsPath = 'assets/';
    // const pages = ['Vstomp', 'Demo3D', 'Demo3D_2', 'BilibiliPlayer', 'WebPage', 'effectChain'];
    // const backgrounds = ['Background.png', 'black.jpg', 'newbackground.png', 'black.jpg', 'black.jpg', 'black.jpg'];

    const backgrounds = ['Background.png', 'black.jpg', 'black.jpg', 'black.jpg'];
    const pages = ['Vstomp', 'BilibiliPlayer', 'WebPage', 'effectChain'];
    const transitionName = ref('slide-left');
    const dragStartX = ref(0);
    const dragEndX = ref(0);
    const isDragging = ref(false);

    const currentPage = computed(() => pages[currentPageIndex.value]);
    const appStyle = computed(() => ({
      backgroundImage: `url(${require('@/assets/' + backgrounds[currentPageIndex.value])})`,
      backgroundSize: '100%',
      backgroundPosition: 'top',
      transition: 'background-image 1s ease'
    }));

    const handleMouseDown = (event) => {
      if (currentPage.value === 'WebPage') return;
      isDragging.value = true;
      dragStartX.value = event.clientX;
      dragEndX.value = event.clientX;
      console.log('App: Mouse down:', dragStartX.value);
    };

    const handleMouseMove = (event) => {
      if (!isDragging.value || currentPage.value === 'WebPage') return;
      dragEndX.value = event.clientX;
      console.log('App: Mouse move:', dragEndX.value);
    };

    const handleMouseUp = (event) => {
      if (!isDragging.value || currentPage.value === 'WebPage') return;
      isDragging.value = false;
      dragEndX.value = event.clientX;
      const dragThreshold = 50;
      const dragDistance = dragEndX.value - dragStartX.value;
      console.log('App: Mouse up:', dragDistance, dragStartX.value, dragEndX.value);

      if (Math.abs(dragDistance) > dragThreshold) {
        if (dragDistance > 0 && currentPageIndex.value > 0) {
          transitionName.value = 'slide-right';
          currentPageIndex.value--;
        } else if (dragDistance < 0 && currentPageIndex.value < pages.length - 1) {
          transitionName.value = 'slide-left';
          currentPageIndex.value++;
        }
      }
    };

    const handleStart = (event) => {
      if (currentPage.value === 'WebPage') return;
      isDragging.value = true;
      dragStartX.value = event.type.startsWith('mouse') ? event.clientX : event.touches[0].clientX;
      dragEndX.value = dragStartX.value;
      console.log('App: Start:', dragStartX.value);
    };

    const handleMove = (event) => {
      if (!isDragging.value || currentPage.value === 'WebPage') return;
      dragEndX.value = event.type.startsWith('mouse') ? event.clientX : event.touches[0].clientX;
      console.log('App: Move:', dragEndX.value);
    };

    const handleEnd = (event) => {
      if (!isDragging.value || currentPage.value === 'WebPage') return;
      isDragging.value = false;
      dragEndX.value = event.type.startsWith('mouse') ? event.clientX : event.changedTouches[0].clientX;
      const dragThreshold = 500;
      const dragDistance = dragEndX.value - dragStartX.value;
      console.log('App: End:', dragDistance, dragStartX.value, dragEndX.value);

      if (Math.abs(dragDistance) > dragThreshold) {
        if (dragDistance > 0 && currentPageIndex.value > 0) {
          transitionName.value = 'slide-right';
          currentPageIndex.value--;
        } else if (dragDistance < 0 && currentPageIndex.value < pages.length - 1) {
          transitionName.value = 'slide-left';
          currentPageIndex.value++;
        }
      }
    };

    const handlePageChange = (direction) => {
      console.log('App: Received page-change event:', direction);
      if (direction === 'forward' && currentPageIndex.value < pages.length - 1) {
        console.log('App: Moving to next page');
        transitionName.value = 'slide-left';
        currentPageIndex.value++;
      } else if (direction === 'back' && currentPageIndex.value > 0) {
        console.log('App: Moving to previous page');
        transitionName.value = 'slide-right';
        currentPageIndex.value--;
      }
    };

    onMounted(() => {
      console.log('App: Component mounted');
      window.electronAPI.onChangePage(handlePageChange);
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
      document.addEventListener('touchmove', handleMove, { passive: false });
      document.addEventListener('touchend', handleEnd);
    });

    onUnmounted(() => {
      window.electronAPI.removeChangePage(handlePageChange);
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
      document.removeEventListener('touchmove', handleMove);
      document.removeEventListener('touchend', handleEnd);
    });

    return {
      currentPageIndex,
      currentPage,
      appStyle,
      transitionName,
      handlePageChange,
      handleMouseDown,
      handleMouseMove,
      handleMouseUp,
      handleStart,
      handleMove,
      handleEnd,
    };
  }
};
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  width: 1920px;
  height: 1080px;
  margin: 0 auto;
  position: absolute;
  overflow: hidden;
  background-color: black;
  background-size: 100%;
  background-position: top;
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.3s ease;
  position: absolute;
  width: 100%;
  height: 100%;
}

.slide-left-enter {
  transform: translateX(100%);
}

.slide-left-leave-to {
  transform: translateX(-100%);
}

.slide-right-enter {
  transform: translateX(-100%);
}

.slide-right-leave-to {
  transform: translateX(100%);
}
</style>